import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { BarAndLine } from '@/components/Charts';
import styles from './index.less';

@connect(({ commonModel }) => ({ commonModel }))
class MixChartDemo extends Component {
  componentDidMount() {
    this.fetch();
  }

  fetch = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'commonModel/query',
      targetKey: 'mixChartData',
      payload: {},
    });
  };

  render() {
    const {
      commonModel: { mixChartData: { defaultMixData = [], mixData = [], mixData2 = [] } = {} },
    } = this.props;
    return (
      <Row className={styles.chartRow}>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <BarAndLine
              height={200}
              data={defaultMixData}
              groupField="group"
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                unit: '%',
              }}
              chartUnitPosition
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <BarAndLine
              height={200}
              data={mixData}
              groupField="group"
              fieldExpand={[
                { field: 'subCost', rename: '总计' },
                { field: 'increase', rename: '数量' },
              ]}
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                unit: '%',
              }}
              chartUnitPosition
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartDarkPanel}>
            <BarAndLine
              height={200}
              data={mixData}
              groupField="group"
              fieldExpand={[
                { field: 'subCost', rename: '总计' },
                { field: 'increase', rename: '数量' },
              ]}
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                unit: '%',
              }}
              theme="dark"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <BarAndLine
              height={200}
              data={mixData2}
              groupField="group"
              fieldExpand={[
                { field: 'actualData', rename: '实际值', fieldKey: 'yLeft' },
                { field: 'forecastData', rename: '预测值', fieldKey: 'yLeft' },
                { field: 'errorRate', rename: '误差率', fieldKey: 'yRight' },
              ]}
              yLeftParams={{
                unit: '万元',
              }}
              yRightParams={{
                unit: '%',
                showYUnit: true,
              }}
              size={15}
              lineType="dashed"
              chartUnitPosition
              adjust={[{ type: 'dodge', marginRatio: 0 }]}
            />
          </div>
        </Col>
      </Row>
    );
  }
}

export default MixChartDemo;
